<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增删改查</title>
    <style>
        ul,
        li {
            padding: 0;
            list-style: none;
        }

        .container {
            width: 500px;
            margin: 0 auto;
        }

        .btn {
            width: 60px;
            height: 30px;
            background-color: antiquewhite;
            border: none;
        }

        .form {
            width: 500px;
            height: auto;
            border: 1px solid #333;
            border-collapse: collapse;

        }

        tr,
        th {
            width: 100px;
            height: 30px;
            text-align: center;
            border: 1px solid #333;
        }

        .window {
            width: 500px;
            height: 300px;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            box-shadow: 0 0 5px #333;
            padding-left: 30px;
            display: none;
        }

        .window li {
            margin: 0;
            padding: 0;
        }

        .close {
            float: right;
            margin: 10px;
            cursor: pointer;
            user-select: none;
        }

        .submit {
            margin-top: 10px;
            position: absolute;
            left: 30px;
        }

        .del,
        .edit {
            cursor: pointer;
            user-select: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <button class="add btn">添加</button>
        <table class="form">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>班级</th>
                    <th>学号</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="window">
        <div class="close">X</div>
        <ul class="info">
            <li>
                <label>姓名：<input type="text" class="name"></label>
            </li>
            <li>
                <label>班级：<input type="text" class="class"></label>
            </li>
            <li>
                <label>学号：<input type="text" class="sid"></label>
            </li>
            <button class="submit btn">提交</button>
        </ul>
    </div>
    <script>
        let tbody = document.querySelector('tbody');
        let add = document.querySelector('.add');
        let dialog = document.querySelector('.window');
        let submit = document.querySelector('.submit');
        let close = document.querySelector('.close');
        let nameInput = document.querySelector('.name');
        let classInput = document.querySelector('.class');
        let sidInput = document.querySelector('.sid');
        let flag = "add", index;
        function setData(data) {
            localStorage.data = JSON.stringify(data);
        }
        function getData() {
            if (localStorage.data) {
                return JSON.parse(localStorage.data);
            } else {
                return [];
            }
        }
        function render() {
            let data = getData();
            let str = "";
            data.forEach((e, i) => {
                str += `<tr id=${i}>
                    <th>${e.id}</th>
                    <th>${e.name}</th>
                    <th>${e.class}</th>
                    <th>${e.sid}</th>
                    <th><span class="del">删除</span> <span class="edit">编辑</span></th>
                </tr>`
            });
            tbody.innerHTML = str;
        }
        render();
        add.onclick = () => {
            dialog.style.display = "block";
            nameInput.value = "";
            classInput.value = "";
            sidInput.value = "";
        }
        close.onclick = () => {
            dialog.style.display = "none";
        }
        submit.onclick = () => {
            if (nameInput.value === "") {
                alert("请输入姓名")
                return;
            }
            if (classInput.value === "") {
                alert("请输入班级")
                return;
            }
            if (sidInput.value === "") {
                alert("请输入学号")
                return;
            }
            let data = getData();
            if (flag === "add") {
                let obj = {
                    id: (Math.random() * 100000).toFixed(0),
                    name: nameInput.value,
                    class: classInput.value,
                    sid: sidInput.value,
                }
                data.push(obj);
                alert("输入成功");
            } else if (flag === "edit") {
                data[index].name=nameInput.value;
                data[index].class=classInput.value;
                data[index].sid=sidInput.value;
                alert("修改成功");
            }
            setData(data);
            render();
            dialog.style.display = "none";
        }
        tbody.onclick = (e) => {
            let { target } = e;
            if (target.className == "del") {
                if (confirm('确认删除吗？')) {
                    index = target.parentNode.parentNode.id;
                    let data = getData();
                    data.splice(index, 1);
                    setData(data);
                    render();
                }
            } else if (target.className == "edit") {
                flag = "edit";
                index = target.parentNode.parentNode.id;
                dialog.style.display = "block";
                let data=getData();
                nameInput.value = data[index].name;
                classInput.value = data[index].class;
                sidInput.value = data[index].sid;
            }
        }
    </script>
</body>

</html>